<template>
  <div class="PayAuth row-center">
    <div class="main-box">
      <div class="label">开票信息</div>
      <!-- <div class="tip">为了保障您的交易安全，请填写您的银行卡信息，“广西制造业企业培优育强服务券平台”会对您的银行卡进行验证。<br>以下银行账号仅作为贵单位在“广西制造业企业培优育强服务券平台”在线支付收款、退款指定账户。</div> -->
      <el-form :model="payForm" :rules="payRules" ref="payFormRef" label-width="110px" size="medium" class="form">
        <el-form-item label="单位名称" prop="title">
          <el-input v-model="payForm.title" :disabled="isInvoiceAuth && notEdit" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxCode">
           <el-input v-model="payForm.taxCode" :disabled="isInvoiceAuth && notEdit" placeholder="请输入纳税人识别号" />
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="payForm.addr" :disabled="isInvoiceAuth && notEdit" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="payForm.tel" :disabled="isInvoiceAuth && notEdit" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="开户银行" prop="bank">
          <el-input v-model="payForm.bank" :disabled="isInvoiceAuth && notEdit" placeholder="请输入开户银行" />
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccount">
          <el-input :disabled="isInvoiceAuth && notEdit" v-model="payForm.bankAccount" placeholder="请输入银行账号" />
        </el-form-item>
        <el-form-item label=""> 
          <div class="row-spaceb">
            <el-button type="primary" class="saveBtn" @click="edit" :loading="saveLoading" :disabled="!isInvoiceAuth" >编辑</el-button>
            <el-button type="primary" class="saveBtn" @click="save" :loading="saveLoading" :disabled="isInvoiceAuth && notEdit" >保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { companyAuthPay,getCompanyPayInfo,invoiceInfo,updateInvoiceInfo } from '@/api/homeApi'
export default {
  data() {
    return {
      payForm: {
        title: '',
        taxCode: '',
        addr: '',
        tel: '',
        bank: '',
        bankAccount: ''
      },
      payRules: {
        title: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        taxCode: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        bank: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
        bankAccount: [
          { required: true, message: '请输入银行账号', trigger: 'blur' },
          { pattern: /^\d+$/, message: '银行账号只能输入数字', trigger: 'blur' }
        ],
      },
      isLoading: false,
      saveLoading: false,
      notEdit: true,
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    isInvoiceAuth() {
        return this.userInfo?.isInvoiceAuth == 1;
      }
  },
  created() {
  },
  mounted() {
    this.getCompanyPayInfoToForm()
  },
  methods: {
    getCompanyPayInfoToForm(){
      invoiceInfo().then(res => {
        if (res.code === 200) {
          this.payForm = res.data
        }
      })
    },
    edit(){
      this.notEdit = false
    },
    save() {
      if (this.userInfo?.isCompanyAuth) {
        this.$refs.payFormRef.validate(valid => {
          if (valid) {
            console.log(this.payForm)
            this.saveLoading = true
            updateInvoiceInfo(this.payForm).then(res => {
             if (res.code === 200) {
                this.$message.success('认证成功！');
                this.$store.dispatch('user/getUserInfo')
                this.$emit('goToBaseInfo')
                this.notEdit = true
              }
             }).finally(() => {
              this.saveLoading = false
            })
          }
        })
      } else {
        this.$message.warning('请先进行企业认证！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.PayAuth {
  .main-box {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.label {
  padding: 20px;
}

.tip {
  padding-left: 20px;
  color: #F62B00;
  margin-bottom: 20px;
  line-height: 25px;
  text-align: left
}

.form {
  width: 530px;
}

.saveBtn {
  margin-top: 40px;
  margin-bottom: 20px;
  background-color: $--color-primary;
  border: 1px solid $--color-primary;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  min-width: 160px;
}
</style>
